<template>
  <div class="cart">
      <div class="check">

        <van-checkbox-group v-model="result" ref="ckbox" :disabled="showStep">

          <van-checkbox class="ckitem" :name="item.shopCartId"  v-for="item in cartList"  :key="item.id" @click="changeCheck(item)">
           <van-swipe-cell>
            <van-card
              :num="item.selectNum"
              :price="item.retail_price.toFixed(2)"
              :desc="item.goods_brief"
              :title="item.name"
              :thumb="item.list_pic_url"
            />
            <div class="stepBox">
 
            <van-stepper v-model="item.selectNum" v-show="showStep"  @change="stepChange(item)"/>

            </div>
                <template #right class="cellright" >
                <van-button square type="danger" text="删除"   @click="swiperClick(item)"/>
              </template>
            </van-swipe-cell>

          </van-checkbox>            

    
          
        </van-checkbox-group>   
        
        <van-submit-bar :price="cartParams.allprice*100" button-text="提交订单" @submit="onSubmit" v-if="!showStep">
          <!-- <van-checkbox v-model="checkAll" @click="barHandler">全选</van-checkbox> -->
          <van-checkbox v-model="checkAll" >全选</van-checkbox>
          <template #tip >
            你一共有<span class="bspan">{{ quantity }}</span>件商品, 你可以此处对购物车 <van-button type="primary"  size="mini"  @click="editCart">编辑</van-button>
          </template>
        </van-submit-bar>


        <div class="eidt"  v-else >
          <div class="btnbox">
   
            <span class="ets">商品右向左滑动进行删除</span>
            <van-button class="vabtn" round type="info" @click="showStep = false">完成编辑</van-button>

          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"Cart",
    data(){
      return{
        // bar
        checked:false,
        // checkBox选项
        result: [],
        cartList:[],
        // 总价
        
        cartParams:{
          allPrice:0,
        },
      // 编辑 并 步进器显示
        showStep:false
      }
    },
    methods:{
      async getCartDetail(){
       let result =await this.$api.goods.reqShopDetail()
       if(result.status == 200){
          let def = {
              // bar
                checked:false,
                // checkBox选项
                result: [],
                cartList:[],
                // 总价
                cartParams:{
                  allPrice:0,
                }
             }
            Object.assign(this.$data,def)
         console.log(result);
         let {cartParams} = result
         this.cartList = result.list 
         this.cartParams = cartParams
         result.list.map(item =>{
           if(item.isChecked){
             this.result.push(item.shopCartId)
           }
         })
       }
      },
      onSubmit(){
        
      },

      editCart(){
        this.showStep = true
      },

      // 滑动删除
       swiperClick(item){
         var _this = this
        this.$dialog.confirm({
          title: '删除商品',
          message: `你确定要删除 ${item.name} 吗?`,
        })
          .then(async () => {
            let result = await _this.$api.goods.reqCartRm({params:{shopCartId:item.shopCartId}})
            if(result.status != 200){
              this.$toast.fail('删除失败')
              return
            }
            this.getCartDetail()

          })
          .catch(() => {
            // on cancel
          });
      },

      // 修改购物车选中状态
      async changeCheck(item){
        if(this.showStep){
          return
        }
          let isChecked = item.isChecked == 1? 0 : 1
          let result = await this.$api.goods.reqChangeCheck({params:{id:item.shopCartId,isChecked}})
          this.getCartDetail()
      },

      // 异步提交全选
      subPro(cartList,isChecked) {
          let promiseList =[]
        for (let index = 0; index < cartList.length; index++) {
          const element = cartList[index];
          let result =  this.$api.goods.reqChangeCheck({params:{id:element.shopCartId,isChecked}})
          promiseList.push(result)
        }      
        let ss =  Promise.all(promiseList)   
        return ss
      },

      // 步进器变量改变
      async stepChange(value){
         let changeNum =  await this.$api.goods.reqCartNum({params:{shopCartId:value.shopCartId,skunum:value.selectNum}})
         if(changeNum.status == 200){
           this.getCartDetail()
         }
      }
      


    },
    mounted(){
      this.getCartDetail()

    },
    computed:{
      quantity(){
       return this.result.length
      },

      checkAll:{
        get(){
          return this.cartList.length == this.result.length ? true : false
        },
        set(val){
          let isChecked = val ? 1:0;
          let ss =   this.subPro(this.cartList,isChecked)
          ss.then(res=>{
            this.getCartDetail()
          })
        },
      }
    }
}
</script>

<style lang="less" scoped>
@import './index.less';

</style>